<template>


	<view class="login_box">

		<!-- 登录logo：猫头鹰蒙眼睛 -->
		<blindfold style="margin-top: 100rpx;" :show.sync="showEye"></blindfold>


		<view class="login_form">

			<u--input :placeholder="loginForm.type === '1' ? '请输入账号/手机号' : '请输入手机号'" border="bottom"
				v-model="loginForm.username" placeholderStyle="{color:'#808080'}" :customStyle="login_input_style"
				clearable>
			</u--input>

			<!-- 密码登录 -->
			<u-input v-if="loginForm.type === '1'" type="password" placeholder="请输入密码" border="bottom"
				v-model="loginForm.password" placeholderStyle="{color:'#808080'}" :customStyle="login_input_style"
				clearable @focus="hideEye(true)" @blur="hideEye(false)">
			</u-input>

			<!-- 登录验证码 -->
			<u-input v-if="loginForm.type === '1'" placeholder="请输入验证码" border="bottom" v-model="loginForm.code"
				placeholderStyle="{color:'#808080'}" :customStyle="ver_code_style" clearable>
				<template slot="suffix">
					<image @click="getVerifyCode()" style="width:80px; height: 38px;" :src="verifyCodeImg"></image>
				</template>
			</u-input>

			<!-- 手机验证码登录 -->
			<u-input v-if="loginForm.type === '2'" placeholder="请输入手机验证码" border="bottom" v-model="loginForm.code"
				placeholderStyle="{color:'#808080'}" :customStyle="login_input_style" clearable>
				<template slot="suffix">
					<u-code ref="uCode" @change="codeTimeChange" seconds="60" changeText="X秒后重新获取" keepRunning
						uniqueKey="login-form"></u-code>
					<u-button @tap="getCode" :text="tips" type="success" style="height: 24px;" size="mini"></u-button>
				</template>
			</u-input>

			<view class="change_type login_label">
				<view style="color: #01906c;" @click="changeType()">
					{{loginForm.type === '1' ? '手机验证码登录' : '密码登录'}}
				</view>
				<view style="margin: 0 20upx;">
					<u-line length="20rpx" color="#d6d7d9" direction="col"></u-line>
				</view>
				<view class="">
					登录遇到问题
				</view>
			</view>

			<button class="login_btn" @click="submit()">立即登录</button>
			<view hover-class="none" @click="gotoRegister" class="login_label">还没有账号？点此注册</view>
		</view>


		<u-toast ref="uToast"></u-toast>

	</view>



</template>

<script>
	import { getUUID } from '@/util/index.js';
	export default {
		data() {
			return {
				// 验证码时间提示
				tips: '',
				showEye: false,
				// 验证码路径
				verifyCodeImg: '',
				// 是否提交中
				submitting: false,
				loginForm: {
					// 1:密码 2:验证码
					type: '1',
					username: '',
					password: '',
					// 验证码uuid
					uuid: '',
					// 验证码
					code: ''
				},
				// 输入框样式
				login_input_style: {
					'background': '#e2f5fc',
					'margin-top': '30upx',
					'border-radius': '100upx',
					'padding': '12px 20px',
					'font-size': '36upx',
				},
				ver_code_style: {
					'background': '#e2f5fc',
					'margin-top': '30upx',
					'border-radius': '100upx',
					'padding': '5px 10px 5px 20px',
					'font-size': '36upx',
				},
				btnStyle: {
					width: "90%",
					height: "100rpx",
					marginTop: '50rpx',
					background: "linear-gradient(-45deg,#01906c,#34D399)",
					color: "#FFFFFF",
					fontSize: "30rpx",
				},
			}
		},
		onLoad() {
			this.getVerifyCode()
		},
		methods: {
			// 隐藏眼睛
			hideEye(type) {
				this.showEye = type
			},
			// 切换类型
			changeType() {
				this.loginForm.type = this.loginForm.type === '1' ? '2' : '1'
			},
			// 手机验证码时间改变
			codeTimeChange(text) {
				this.tips = text
			},
			// 获取验证码
			getVerifyCode() {
				this.loginForm.uuid = getUUID()
				this.loginForm.code = ''
				this.$httpApi.getCaptchaPath(this.loginForm.uuid).then(({ data }) => {
					if (data.code == "000000") {
						this.verifyCodeImg = 'data:image/png;base64,' + data.data
					} else {
						uni.$u.toast(data.mesg);
					}
				}).catch(e=>{})
			},

			// 获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			gotoRegister() {
				uni.navigateTo({
					url: '/pages/login/register'
				})
			},
			// 提交登录
			submit() {
				if (this.loginForm.type == '1') {
					if (!this.loginForm.username) {
						uni.$u.toast('请输入账号/手机号/邮箱');
						return false
					}
					if (!this.loginForm.password) {
						uni.$u.toast('请输入密码');
						return false
					}
					if (!this.loginForm.code) {
						uni.$u.toast('请输入验证码');
						return false
					}

					uni.showLoading({
						title: '登录中...'
					})
					if (this.submitting){
						return
					}
					
					this.submitting = true

					let form = {
						platform: 'h5',
						username: this.loginForm.username,
						password: this.loginForm.password,
						uuid: this.loginForm.uuid,
						code: this.loginForm.code
					}

					this.$httpApi.login(form).then(({ data }) => {
						if (data.code == "000000") {
							this.$store.commit("SET_ACCESS_TOKEN",data.data.accessToken);
							this.$store.commit("SET_REFRESH_TOKEN",data.data.refreshToken);
							this.$store.dispatch('getUserInfo')
							this.$refs.uToast.show({
								type: 'success',
								icon: false,
								message: "登录成功",
							})
							this.submitting = false
							uni.hideLoading()
							uni.switchTab({
								url: '/pages/index/index'
							});
						} else {
							this.getVerifyCode()
							this.$refs.uToast.show({
								type: 'error',
								icon: false,
								message: data.mesg
							})
							uni.hideLoading()
							this.submitting = false
						}
					})
				}

				if (this.loginForm.type == '2') {
					if (!this.loginForm.username) {
						uni.$u.toast('请输入手机号');
						return false
					}
					if (!this.loginForm.code) {
						uni.$u.toast('请输入手机验证码');
						return false
					}
				}

			
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login_box {
		padding: 0 100upx;
		position: relative;
	}

	.login_title {
		position: absolute;
		top: 0;
		line-height: 360upx;
		font-size: 68upx;
		color: #fff;
		text-align: center;
		width: 100%;
		margin-left: -100upx;
	}

	.login_form {
		margin-top: 80upx;
	}

	.login_input {
		background: #e2f5fc;
		margin-top: 30upx;
		border-radius: 100upx;
		padding: 20upx 40upx;
		font-size: 36upx;
	}

	.input-placeholder,
	.login_input {
		color: #94afce;
	}

	.login_label {
		padding: 60upx 0;
		text-align: center;
		font-size: 30upx;
		color: #a7b6d0;
	}

	.login_btn {
		background: #ff65a3;
		color: #fff;
		border: 0;
		border-radius: 100upx;
		font-size: 36upx;
	}

	.login_btn:after {
		border: 0;
	}

	/*按钮点击效果*/
	.login_btn.button-hover {
		transform: translate(1upx, 1upx);
	}

	.code_btn {
		height: 4;
	}


	.change_type {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
